<template>
  <div class="consultation-reply">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>回复管理</span>
          <el-button type="primary" @click="handleExport">导出记录</el-button>
        </div>
      </template>

      <!-- 搜索区域 -->
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="回复人">
          <el-input v-model="searchForm.replier" placeholder="请输入回复人" />
        </el-form-item>
        <el-form-item label="回复类型">
          <el-select v-model="searchForm.type" placeholder="请选择类型">
            <el-option label="领养咨询" value="adoption" />
            <el-option label="医疗咨询" value="medical" />
            <el-option label="商品咨询" value="product" />
            <el-option label="其他咨询" value="other" />
          </el-select>
        </el-form-item>
        <el-form-item label="回复时间">
          <el-date-picker
            v-model="searchForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 回复列表 -->
      <el-table :data="replyList" border style="width: 100%">
        <el-table-column prop="replier" label="回复人" width="120" />
        <el-table-column prop="type" label="咨询类型" width="120">
          <template #default="scope">
            <el-tag>{{ scope.row.type }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="consultTitle" label="咨询标题" min-width="200" />
        <el-table-column prop="replyContent" label="回复内容" min-width="300" show-overflow-tooltip />
        <el-table-column prop="replyTime" label="回复时间" width="180" />
        <el-table-column prop="satisfaction" label="满意度" width="120">
          <template #default="scope">
            <el-rate
              v-model="scope.row.satisfaction"
              disabled
              show-score
              text-color="#ff9900"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button 
              type="primary" 
              size="small" 
              @click="handleDetail(scope.row)"
            >
              详情
            </el-button>
            <el-button 
              type="success" 
              size="small" 
              @click="handleFollowUp(scope.row)"
            >
              跟进
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      title="回复详情"
      v-model="detailDialogVisible"
      width="700px"
    >
      <el-descriptions :column="2" border>
        <el-descriptions-item label="回复人">{{ currentReply.replier }}</el-descriptions-item>
        <el-descriptions-item label="回复时间">{{ currentReply.replyTime }}</el-descriptions-item>
        <el-descriptions-item label="咨询类型">
          <el-tag>{{ currentReply.type }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="满意度">
          <el-rate
            v-model="currentReply.satisfaction"
            disabled
            show-score
            text-color="#ff9900"
          />
        </el-descriptions-item>
      </el-descriptions>

      <el-divider content-position="left">咨询内容</el-divider>
      <div class="detail-content">
        <div class="content-title">{{ currentReply.consultTitle }}</div>
        <div class="content-text">{{ currentReply.consultContent }}</div>
      </div>

      <el-divider content-position="left">回复内容</el-divider>
      <div class="detail-content">
        <div class="content-text">{{ currentReply.replyContent }}</div>
        <div class="attachment-list" v-if="currentReply.attachments?.length">
          <div class="attachment-title">附件：</div>
          <div class="attachments">
            <div 
              v-for="(file, index) in currentReply.attachments" 
              :key="index"
              class="file-item"
            >
              <el-icon><Document /></el-icon>
              <span>{{ file.name }}</span>
              <el-button type="primary" link size="small" @click="downloadFile(file)">
                下载
              </el-button>
            </div>
          </div>
        </div>
      </div>

      <el-divider content-position="left">跟进记录</el-divider>
      <el-timeline>
        <el-timeline-item
          v-for="(record, index) in currentReply.followUpRecords"
          :key="index"
          :timestamp="record.time"
          :type="record.type"
        >
          <div class="timeline-title">{{ record.operator }}</div>
          <div class="timeline-content">{{ record.content }}</div>
        </el-timeline-item>
      </el-timeline>
    </el-dialog>

    <!-- 跟进对话框 -->
    <el-dialog
      title="添加跟进"
      v-model="followUpDialogVisible"
      width="500px"
    >
      <el-form :model="followUpForm" :rules="followUpRules" ref="followUpFormRef" label-width="80px">
        <el-form-item label="跟进内容" prop="content">
          <el-input 
            type="textarea" 
            v-model="followUpForm.content" 
            rows="4"
            placeholder="请输入跟进内容"
          />
        </el-form-item>
        <el-form-item label="跟进类型" prop="type">
          <el-select v-model="followUpForm.type" placeholder="请选择跟进类型">
            <el-option label="电话跟进" value="phone" />
            <el-option label="邮件跟进" value="email" />
            <el-option label="其他方式" value="other" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="followUpDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitFollowUp">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Document } from '@element-plus/icons-vue'

// 搜索表单
const searchForm = reactive({
  replier: '',
  type: '',
  dateRange: []
})

// 回复列表数据
const replyList = ref([
  {
    replier: '王医生',
    type: '医疗咨询',
    consultTitle: '猫咪发烧症状咨询',
    consultContent: '我家猫咪今天精神不太好，感觉有点发烧，请问需要怎么处理？',
    replyContent: '建议先测量体温，如果超过39.5度需要及时就医。同时注意保暖和补充水分。',
    replyTime: '2024-03-18 09:30:00',
    satisfaction: 5,
    attachments: [],
    followUpRecords: [
      {
        operator: '王医生',
        time: '2024-03-19 10:00:00',
        type: 'success',
        content: '电话回访，猫咪已恢复正常。'
      }
    ]
  },
  {
    replier: '李顾问',
    type: '领养咨询',
    consultTitle: '关于领养金毛的问题',
    consultContent: '想了解领养金毛需要准备什么，家里的环境是否合适。',
    replyContent: '金毛需要较大的活动空间，建议您的房屋面积在80平米以上。同时需要准备狗粮、狗窝、牵引绳等用品。',
    replyTime: '2024-03-18 14:30:00',
    satisfaction: 4,
    attachments: [
      { name: '金毛饲养指南.pdf', url: '#' }
    ],
    followUpRecords: []
  }
])

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(100)

// 详情对话框
const detailDialogVisible = ref(false)
const currentReply = reactive({})

// 跟进对话框
const followUpDialogVisible = ref(false)
const followUpFormRef = ref(null)
const followUpForm = reactive({
  content: '',
  type: ''
})

const followUpRules = {
  content: [{ required: true, message: '请输入跟进内容', trigger: 'blur' }],
  type: [{ required: true, message: '请选择跟进类型', trigger: 'change' }]
}

// 方法定义
const handleSearch = () => {
  ElMessage.success('搜索功能待实现')
}

const resetSearch = () => {
  searchForm.replier = ''
  searchForm.type = ''
  searchForm.dateRange = []
}

const handleDetail = (row) => {
  Object.assign(currentReply, row)
  detailDialogVisible.value = true
}

const handleFollowUp = (row) => {
  Object.assign(currentReply, row)
  followUpForm.content = ''
  followUpForm.type = ''
  followUpDialogVisible.value = true
}

const handleExport = () => {
  ElMessage.success('导出功能待实现')
}

const downloadFile = (file) => {
  ElMessage.success('文件下载功能待实现')
}

const submitFollowUp = async () => {
  if (!followUpFormRef.value) return
  
  await followUpFormRef.value.validate((valid) => {
    if (valid) {
      ElMessage.success('跟进记录添加成功')
      followUpDialogVisible.value = false
    }
  })
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // 重新加载数据
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  // 重新加载数据
}
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.detail-content {
  margin-bottom: 20px;
}

.content-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.content-text {
  color: #606266;
  line-height: 1.6;
}

.attachment-title {
  font-weight: bold;
  margin: 10px 0;
}

.attachments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.timeline-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.timeline-content {
  color: #606266;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 